@keyframes stripes-animation {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 40px 0;
  }
}

@keyframes stripes-animation-vertical {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 0 40px;
  }
}

.root {
  --progress-radius: var(--mantine-radius-default);
  --progress-size: var(--progress-size-md);

  --progress-size-xs: 3px;
  --progress-size-sm: 5px;
  --progress-size-md: 8px;
  --progress-size-lg: 12px;
  --progress-size-xl: 16px;

  position: relative;
  height: var(--progress-size);
  border-radius: var(--progress-radius);
  overflow: hidden;
  display: flex;

  @mixin where-light {
    background-color: var(--mantine-color-gray-2);
  }

  @mixin where-dark {
    background-color: var(--mantine-color-dark-4);
  }

  &:where([data-orientation='vertical']) {
    height: auto;
    width: var(--progress-size);
    flex-direction: column-reverse;
  }
}

.section {
  background-color: var(--progress-section-color);
  height: 100%;
  width: var(--progress-section-size);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-size: 20px 20px;
  transition: width var(--progress-transition-duration, 100ms) ease;

  &:where([data-striped]) {
    background-image: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.15) 75%,
      transparent 75%,
      transparent
    );
  }

  &:where([data-animated]) {
    animation: stripes-animation 1s linear infinite;
  }

  &:where(:last-of-type) {
    border-radius: 0;
    border-start-end-radius: var(--progress-radius);
    border-end-end-radius: var(--progress-radius);
  }

  &:where(:first-of-type) {
    border-radius: 0;
    border-start-start-radius: var(--progress-radius);
    border-end-start-radius: var(--progress-radius);
  }

  .root:where([data-orientation='vertical']) & {
    width: 100%;
    height: var(--progress-section-size);
    transition: height var(--progress-transition-duration, 100ms) ease;

    &:where([data-striped]) {
      background-image: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
      );
    }

    &:where([data-animated]) {
      animation: stripes-animation-vertical 1s linear infinite;
    }

    &:where(:last-of-type) {
      border-radius: 0;
      border-start-start-radius: var(--progress-radius);
      border-start-end-radius: var(--progress-radius);
    }

    &:where(:first-of-type) {
      border-radius: 0;
      border-end-start-radius: var(--progress-radius);
      border-end-end-radius: var(--progress-radius);
    }
  }
}

.label {
  color: var(--progress-label-color, var(--mantine-color-white));
  font-weight: bold;
  user-select: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: min(calc(var(--progress-size) * 0.65), rem(18px));
  line-height: 1;
  padding-inline: 4px;

  .root:where([data-orientation='vertical']) & {
    writing-mode: vertical-rl;
  }
}
